<!--  -->
<template>
  <div class="global-pic relative w-full h-[215px]">
    <div
      class="bg-[url(@/assets/net-earth_1.png)] w-[224px] h-[215px] absolute left-1/2 top-0 transform -translate-x-1/2"
    >
      <div
        class="global-tabs global-left -left-[70px] top-[20px]"
        style="transform-origin: 100% 20%"
        v-if="placeArr[0]"
        @click="initTable(placeArr[0].code)"
      >
        {{ placeArr[0].name }}<span> {{ placeArr[0].value }}</span>
      </div>
      <div
        class="global-tabs global-left -left-[100px] top-[70px]"
        style="transform-origin: 100% 20%"
        v-if="placeArr[1]"
        @click="initTable(placeArr[1].code)"
      >
        {{ placeArr[1].name }}<span> {{ placeArr[1].value }}</span>
      </div>
      <div
        class="global-tabs global-left -left-[100px] top-[120px]"
        style="transform-origin: 100% 20%"
        v-if="placeArr[2]"
        @click="initTable(placeArr[2].code)"
      >
        {{ placeArr[2].name }}<span> {{ placeArr[2].value }}</span>
      </div>
      <div
        class="global-tabs global-left -left-[70px] top-[170px]"
        style="transform-origin: 100% 20%"
        v-if="placeArr[3]"
        @click="initTable(placeArr[3].code)"
      >
        {{ placeArr[3].name }}<span> {{ placeArr[3].value }}</span>
      </div>
      <div
        class="global-tabs global-right left-[180px] top-[20px]"
        style="transform-origin: 0% 0%"
        v-if="placeArr[4]"
        @click="initTable(placeArr[4].code)"
      >
        {{ placeArr[4].name }}<span> {{ placeArr[4].value }}</span>
      </div>
      <div
        class="global-tabs global-right left-[210px] top-[94px]"
        style="transform-origin: 0% 0%"
        v-if="placeArr[5]"
        @click="initTable(placeArr[5].code)"
      >
        {{ placeArr[5].name }}<span> {{ placeArr[5].value }}</span>
      </div>
      <div
        class="global-tabs global-right left-[180px] top-[170px]"
        style="transform-origin: 0% 0%"
        v-if="placeArr[6]"
        @click="initTable(placeArr[6].code)"
      >
        {{ placeArr[6].name }}<span> {{ placeArr[6].value }}</span>
      </div>

      <div class="absolute left-[50px] top-[78px] text-sm flex items-center">
        接入省级数量
        <div class="w-10 text-center text-[#F6BF53]">{{ provinceCount }}</div>
      </div>
      <div class="absolute left-[50px] top-[115px] text-sm flex items-center">
        接入地区总数
        <div class="w-10 text-center text-[#F6BF53]">{{ areaCount }}</div>
      </div>
    </div>
  </div>
  <div
    class="w-full relative cursor-pointer"
    style="height: calc(100% - 215px)"
    @click="showDialog2 = true"
  >
    <div
      class="bg-[url(@/assets/super-bar_1.png)] w-[335px] h-[102px] absolute -bottom-2 transform -translate-x-1/2 left-1/2 flex px-20 py-6 text-sm justify-between items-center text-center"
    >
      <div>
        <div>
          <span class="mr-1 text-base text-[#00FFF4]">{{ store.centerTwoSum.kind }}</span
          >种
        </div>
        <div>可办理业务</div>
      </div>
      <div>
        <div>
          <span class="mr-1 text-base text-[#53BFF9]">{{
            Math.floor(store.centerTwoSum.count / 1000) / 10
          }}</span
          >万次
        </div>
        <div>业务办理量</div>
      </div>
    </div>
  </div>

  <DialogBox
    title="政务服务自助一体机接入情况"
    :show="showDialog"
    @close="showDialog = false"
    @opened="initDetail"
  >
    <DivideSelector
      :list="placeArr"
      labelKey="name"
      valueKey="code"
      :activeIndex="activeTableTab"
      @change="changeTableTab"
    ></DivideSelector>
    <el-table
      :data="tableData"
      stripe
      max-height="492px"
      style="width: 100%"
      class="table mt-[22px]"
      height="490px"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="name" label="市" />
      <el-table-column prop="num" label="市接入数量" />
      <el-table-column prop="childName" label="区" />
      <el-table-column prop="address" label="区接入数量">
        <template #default>1</template>
      </el-table-column>
    </el-table>
  </DialogBox>

  <DialogBox title="政务服务自助一体机分类型统计" :show="showDialog2" @close="showDialog2 = false">
    <DivideSelector
      :list="tableTab2"
      labelKey="ModuleName"
      value-key="ModuleName"
      :gridNum="tableTab2.length"
      @change="changeTableTab2"
    ></DivideSelector>

    <el-table
      class="table mt-[22px]"
      :data="dialog2Data"
      :border="true"
      style="width: 100%"
      stripe
      max-height="492px"
      height="490px"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <div v-if="scope.row.levelthree" class="">
            <div class="grid grid-cols-2 px-5 text-lg text-sky-400">
              <div>业务名称</div>
              <div>业务办理量（次）</div>
            </div>
            <div v-for="(item, index) in scope.row.levelthree" :key="index" class="">
              <div v-for="(value, key) in item" :key="key" class="grid grid-cols-2 py-2 px-5">
                <div>{{ key }}</div>
                <div>{{ value }}次</div>
              </div>
            </div>
          </div>
          <div v-else class="text-center">暂无数据</div>
        </template>
      </el-table-column>
      <el-table-column label="类型名称" prop="ModuleName" />
      <el-table-column label="业务类型数量" prop="name">
        <template #default="scope">
          {{ scope.row.levelthree ? scope.row.levelthree.length : 0 }}
        </template>
      </el-table-column>
      <el-table-column label="办理量（件）" prop="ModuleName">
        <template #default="scope">
          {{ getMessionNum(scope.row.levelthree) }}
        </template>
      </el-table-column>
    </el-table>

    <!-- <div ref="detailChartCenter1" class="h-[522px]"></div> -->
  </DialogBox>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import DialogBox from '@/components/box/DialogBox.vue'
import DivideSelector from '@/components/left/Inner/components/DivideSelector.vue'
import { useCounterStore } from '@/stores/counter'
import type { levelOne, levelThree, levelTwo, OneMachineCountryList } from '@/types/baseTypes'
import type { TableColumnCtx } from 'element-plus'
import { sum as _sum } from 'lodash'
import moment from 'moment'
import { onMounted, ref } from 'vue'
const placeArr = ref<OneMachineCountryList[]>([])
const store = useCounterStore()
const showDialog = ref(false)
const showDialog2 = ref(false)
onMounted(() => {
  initData()
  requestApi
    .GetTaskAndCount({
      startDate: '2024-10-01 00:00:00',
      endDate: moment().format('YYYY-MM-DD HH:mm:ss')
    })
    .then((res) => {
      tableTab2.value = res
      res.forEach((levelOne) => {
        if (levelOne.leveltwo) {
          levelOne.leveltwo.forEach((levelThree, levelTwoIdx) => {
            data1xAxis.push(levelThree.ModuleName)
            data1Value.push(0)
            if (levelThree.levelthree) {
              data1Value[levelTwoIdx] += levelThree.levelthree.length
              levelThree.levelthree.forEach((item) => {
                data2xAxis.push(Object.keys(item)[0])
                data2Value.push(item[Object.keys(item)[0]])
              })
            }
          })
        }
      })
      // console.log(_sum(data1Value), _sum(data2Value))

      store.centerTwoSum.kind = _sum(data1Value)
      store.centerTwoSum.count = _sum(data2Value)
    })
})
const areaCount = ref(0)
const provinceCount = ref(0)
const initData = () => {
  requestApi.GetOneMachineCountry().then((res) => {
    placeArr.value = res.list
    areaCount.value = res.areaCount
    provinceCount.value = res.provinceCount
  })
}

const initTable = (regionCode: string) => {
  activeTableTab.value = regionCode
  showDialog.value = true
}
//弹窗内逻辑
const initDetail = () => {
  requestApi
    .GetCangoRegionList({
      code: `${activeTableTab.value}`,
      level: 2
    })
    .then(async (res) => {
      const dataArr: any[] = []
      for (let index = 0; index < res.length; index++) {
        const data = await requestApi.GetCangoRegionList({
          code: `${res[index].code}`,
          level: 3
        })
        data.forEach((item) => {
          dataArr.push({
            name: res[index].name,
            num: data.length,
            childName: item.name
          })
        })
      }
      tableData.value = dataArr
    })
}
const activeTableTab = ref<string>('')

const changeTableTab = (idx: string | number) => {
  activeTableTab.value = `${idx}`
  initDetail()
}

const tableData = ref<tableDataInterface[]>([])

interface tableDataInterface {
  name: string
  num: number
  childName: string
}
interface SpanMethodProps {
  row: tableDataInterface
  column: TableColumnCtx<tableDataInterface>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
  const idx = tableData.value.findIndex((e) => e.name == row.name)

  if (rowIndex > 0) {
    if (columnIndex == 0 || columnIndex == 1) {
      const preRow = tableData.value[rowIndex - 1]
      if (preRow.name == row.name) {
        return [0, 1]
      }
    }
  }
  if (columnIndex == 0 || columnIndex == 1) {
    if (idx > -1) {
      return [tableData.value[idx].num, 1]
    }
  }
}

const activeTableTab2 = ref<number | string>(0)
//弹窗内逻辑
let data1xAxis: string[] = []
let data1Value: number[] = []
let data2xAxis: string[] = []
let data2Value: number[] = []

const dialog2Data = ref<levelTwo[]>([])
const changeTableTab2 = (idx: number | string) => {
  activeTableTab2.value = idx

  const select = tableTab2.value.find((e) => e.ModuleName == idx)
  dialog2Data.value = select?.leveltwo ?? []
}

const tableTab2 = ref<levelOne[]>([])
const getMessionNum = (data?: levelThree[]) => {
  if (data) {
    let num = 0
    for (let key of data) {
      for (let itmKey in key) {
        num += key[itmKey]
      }
    }
    return num
  } else {
    return 0
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */

.global-right {
  position: absolute;
  background: url(@/assets/tag-right_1.png);
  background-size: 100% 100%;
  width: 114px;
  height: 40px;
  text-align: end;
}

.global-left {
  position: absolute;
  background: url(@/assets/tag-left.png);
  background-size: 100% 100%;
  width: 114px;
  height: 40px;
}

.global-tabs {
  transition: all 0.2s;
  line-height: 30px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  justify-content: center;

  span {
    margin-left: 5px;
    color: #00fff4;
  }

  &:hover {
    transform: scale(1.2);
  }
}

.table {
  --el-table-tr-bg-color: #19aeef20;
  --el-table-header-bg-color: #0a577b;
  --el-fill-color-lighter: #0000;
  --el-table-header-text-color: #fff;
}
</style>
